<template>
  <div class="panel" style="height: 100%;width: 100%">
    <div class="panel-heading">
      <i class="fa fa-sync fa-spin"></i>图表配置
    </div>
    <div class="panel-body">
      <el-form>
        <el-form-item label="图表名称:">
          <el-input v-model="workBook.name"></el-input>
        </el-form-item>
        <el-form-item label="数据源:">
          <span>
            <span style="font-weight: bold">{{ dataSource.name || '无' }}</span>&nbsp;
          <el-button v-show="dataSource.id" type="text" icon="el-icon-edit"
                     @click="handleEditDataSource(dataSource)">编辑</el-button>
          <el-button type="text" style="color:#67C23A" icon="el-icon-connection"
                     @click="handleChangeDataSource">{{ dataSource.id ? '切换' : '选择' }}</el-button>
        </span>
        </el-form-item>
        <el-form-item label="图表类型:" class="img-select">
          <el-select v-model="workBook.chartMode" placeholder="请选择图表" @change="handleChangeChartMode">
            <el-option
              v-for="item in chartDict"
              :key="item.id"
              :label="item.description"
              :value="item.id"
              :disabled="item.disabled">
              <el-popover
                placement="right"
                :width="200"
                trigger="hover"
                :show-after="500"
              >
                <template #reference>
                  <div class="chart-img">
                    <el-image
                      :src="item.disabled?require('@/assets' + item.icon.Normal):require('@/assets' + item.icon.Selected)">
                      <template #placeholder>
                        <div class="image-slot">
                          加载中<span class="dot">...</span>
                        </div>
                      </template>
                    </el-image>
                  </div>
                </template>
                <div v-html="item.instruction" class="chart_tooltips"></div>
              </el-popover>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开启同环比:">
          <el-switch v-model="workBook.isYoy" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="同环比类型:" v-show="workBook.isYoy">
          <el-radio-group v-model="workBook.yoyType" style="width: 300px">
            <el-radio label="year">同比-年</el-radio>
            <el-radio label="month">环比-月</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="自动刷新:">
          <el-input-number v-model.number="workBook.autoUpdate" placeholder="图表自动刷新间隔时间(单位:秒),0表示不刷新"
                           :min="0"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="showChartConfig">样式配置</el-button>
          <el-button type="success" @click="saveWorkBook">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 选择新的数据源 -->
    <form-dialog ref="chooseDataSourceDiag" title="数据源选择" width="45%">
      <template v-slot:default="slotProps">
        <data-source-manage>
          <template v-slot:operation="scope">
            <el-button type="success" @click="changeDataSource(scope.data)">选择</el-button>
          </template>
        </data-source-manage>
      </template>
      <template v-slot:foot>
        <div></div>
      </template>
    </form-dialog>
    <!-- 图表样式配置组件 -->
    <component ref="defaultChart" :is="configComponentName"></component>
  </div>

</template>

<script>
import {checkOpt, store} from "@/components/chart/common/store";
import {computed, reactive, ref, toRefs, watch} from "vue";
import DataSourceManage from "@/components/datasource/manage";
import FormDialog from "@/components/formDialog";
import defaultChartConfig from "@/views/WorkBook/config/defaultChart";
import measureSticker from "@/views/WorkBook/config/measureSticker"

import {getChartConfigByChartMode} from "@/components/chart/common/config";

export default {
  name: "WorkBookConfig",
  components: {
    DataSourceManage,
    FormDialog,
    defaultChartConfig,
    measureSticker
  },
  emits: ['handleSave'],
  props: {
    workBook: {
      type: Object,
    },
    dataSource: {
      type: Object,
    }
  },
  inject: ['handleEditDataSource'],
  setup(props) {
    const {workBook} = toRefs(props)
    const state = reactive({
      chartDict: [...store.chartDict]
    })

    watch(() => {
      return workBook.value
    }, () => {
      state.chartDict = state.chartDict.map(t => {
        return {
          ...t,
          disabled: !checkOpt(workBook.value.columns, workBook.value.rows, workBook.value.subDimension, t.rule)
        }
      })
    }, {deep: true});

    const configComponentName = computed(() => {
      const chartInfo = state.chartDict.find(d => {
        return d.id === workBook.value.chartMode;
      });
      if (chartInfo) {
        switch (chartInfo.name) {
          case 'MeasureStickerChart' :
            return 'measureSticker';
          default :
            return 'defaultChartConfig';
        }
      } else {
        return 'defaultChartConfig';
      }
    })

    return {
      ...toRefs(state),
      configComponentName
    }
  },
  data() {
    return {
      value: ''
    }
  },
  methods: {
    handleChangeDataSource() {
      this.$refs.chooseDataSourceDiag.open().then(data => {
        Object.assign(this.dataSource, data.data)
      })
    },
    //切换数据源
    changeDataSource(data) {
      this.$refs.chooseDataSourceDiag.confirm(data)
    },
    saveWorkBook() {
      this.$emit('handleSave')
    },
    //显示图表配置弹窗
    showChartConfig() {
      this.$refs.defaultChart.show(this.workBook.chartConfig, config => {
        this.workBook.chartConfig = config;
      }, this.workBook)
    },
    //图表类型变更
    handleChangeChartMode(newVal) {
      this.workBook.isYoy = false
      this.workBook.chartConfig = getChartConfigByChartMode(newVal)
    }
  }
}
</script>


<style lang="scss" scoped>
.chart_tooltips {
  z-index: 999;
  font-size: 12px;
  color: #333;
  line-height: 180%;
}

.el-select-dropdown__item {
  height: 100px;
  padding: 10px 40px;
}

.chart-img:hover:not(.is-disabled) {
  transform: scale(1.2);
}

.el-select-dropdown__item.selected {
  border: 1px solid #409EFF;
}

</style>
